import { usePlanApi } from './usePlanApi';
import { usePlanBaseApi } from './usePlanBaseApi';
import { usePlanAuthority } from './usePlanAuthority';
import {ref} from 'vue'
import {useUserProfile} from './useUserProfile'
export const usePlanOperateComponent = (Variable, emit) => {
  const { queryPlanByFilter } = usePlanAuthority(Variable);
  const {
    $q,
    modifyPlan,
    Ignore,
    isIgnore,
    mappingProps,
    showRenameDialog,
    targetName,
    isReset,
    menuContent,
    isSearch,
    sortCode,
    PortalIsChange,
    pageID,
    planIsChange,
    queryPlanList,
    currectPlan,
    showPopup,
    searchFilter,
    UserProfile,
    isCreate
  } = Variable;
  const {
    queryPlanSave,
    queryPlanSaveAs,
    getQueryPlanList,
    CreateOrUpdateQueryPlan,
    UpdateQueryPlan,
    synchronizationMixView,
    synchronizationFilter,
  } = usePlanApi(Variable, emit);
  const { preventDefault,GetQueryPlanV2 } = usePlanBaseApi(Variable, emit);
  const { planOperate } = usePlanApi(Variable, emit);

  const sortRef = ref(null)
  const showPopover = ref(null)
  const actions = ref([])
  const {setUserProfile} = useUserProfile(UserProfile,modifyPlan,pageID)
  const generatePcQuerplanOperate = () => {
    return (
      <t-menu
        ref={menuContent}
        fit
        style='width:318px;overflow:visible;z-index:1000'
        class='plan_triangle_up'
      >
        <t-card>
          <t-card-section
            class='row items-center q-pb-none tr-card-header'
            style='    display: flex;
                padding: 0 24px;
                justify-content: space-around;
                align-items: center;
                margin-top:1px;
                height: 48px;'
          >
            <div class='text' style={'font-size:16px; color:rgba(0,0,0, var(--t-color-opacity, /*批量处理90%透明度*/.9))'}>
              {$q.lang.queryPlan.title.planList}
            </div>
            {(() => {
              if (mappingProps.showTips != '0') {
                return (
                  <t-icon
                    style='cursor: pointer;font-size:14px;margin-left:8px'
                    title={
                      !Ignore.value
                        ? $q.lang.queryPlan.title.openPlanChange
                        : $q.lang.queryPlan.title.closePlanChange
                    }
                    name={
                          !Ignore.value
                        ? 'notifications_off'
                        : 'notifications_none'
                    }
                    onClick={() => {
                      Ignore.value = !Ignore.value;
                      try {
                        setUserProfile('QueryPlan_ChangeNotice', Ignore.value ? '1' : '0');
                      } catch (error) {}
                    }}
                  ></t-icon>
                );
              }
            })()}

            <t-space />
            <t-select
              outlined={false}
              borderless
              v-model={sortCode.value}
              style='border:0;outline:0;display: inline-block; width: 110px;border-radius:4px'
              itemsDataSourceType='static'
              class='select_queryplan_select_sort'
              staticItems={[
                {
                  label: $q.lang.queryPlan.title.defautSort,
                  value: 'PlanOrder',
                },
                {
                  label: $q.lang.queryPlan.title.descSort,
                  value: 'plan.Name desc',
                },
                {
                  label: $q.lang.queryPlan.title.aseSwort,
                  value: 'plan.Name asc',
                },
              ]}
            ></t-select>
            <t-icon
              name='search'
              style='color:rgba(0,0,0,.56)'
              onClick={() => {
                isSearch.value = !isSearch.value;
              }}
            ></t-icon>
            {(()=>{
              if(mappingProps.planType=='1'){
                return  <i title={$q.lang.queryPlan.title.createPlan} class={'fas dx-icon icon-t-plus'} onClick={()=>{

                  isCreate.value=true
                  queryPlanSaveAs()

                }} style={`font-size: 10px;color: rgba(0, 0, 0, .56);margin-left: 8px;`}></i>
              }
            })()}

            <div style=' width: 100%;margin-top: 0px;   border-bottom: 1px solid #eee;'></div>
          </t-card-section>
          {(() => {
            if (isSearch.value) {
              return (
                <t-input
                  tabIndex='0'
                  class='search_input_border_none'
                  borderType='borderless'
                  borderless={true}
                  outlined={false}
                  style='width:100%;    width: calc(100% - 32px); margin-left: 16px;'
                  placeholder={$q.lang.queryPlan.title.searchPlaceholder}
                  v-model={searchFilter.value}
                  dense='dense'
                >
                  {{
                    prepend: () => {
                      return (
                        <t-icon name='search' class='text-gray-8'></t-icon>
                      );
                    },
                  }}
                </t-input>
              );
            }
          })()}
          <div>
            <t-list
              class='queryPlan_list'
              style={`min-width: 316px;${isSearch.value ? '' : 'margin-top:16px'};max-height:300px;overflow:auto;padding-bottom:10px !important`}
            >
              {(() => {
                let Template = [];
                queryPlanByFilter.value.forEach(item => {
                  Template.push(
                    <t-item
                      clickable
                      style='    overflow: hidden;    margin-bottom: 1px;'
                      class={
                        modifyPlan.value&& modifyPlan.value.ID == item.ID
                          ? 'plan_list_item_ckeck'
                          : 'plan_list_item_notckeck'
                      }
                    >
                      <t-item-section>
                        <Plan
                          PortalIsChange={PortalIsChange.value}
                          planType={mappingProps.planType}
                          planSort={sortCode.value}
                          showSubWarning={mappingProps.showSubWarning}
                          pageID={pageID.value}
                          onOperate={(e)=>{
                            isCreate.value=false
                            planOperate(e)
                          }}
                          plan={item}
                          v-model:planIsChange={planIsChange.value}
                          planList={queryPlanList.value}
                          v-model:modifyPlan={modifyPlan.value}
                          onPlanChange={async(plan) => {
                           plan = await GetQueryPlanV2(plan.ID)
                            plan.isReady = true
                            modifyPlan.value = Object.assign({}, plan);
                            currectPlan.value = Object.assign({}, plan);
                            menuContent.value.hide();
                          }}
                        ></Plan>
                      </t-item-section>
                    </t-item>,
                  );
                });
                return Template;
              })()}
            </t-list>
          </div>
        </t-card>
      </t-menu>
    );
  };
  const generateMobileQuerplanOperate = () => {
    return (
      <tm-dialog
        ref={menuContent}
        class='select_helper_popup select_helper_popup_m'
        position='right'
        v-model:show={showPopup.value}
        // 如果设置为false 组件限制无法全屏
        maximized={true}
        onShow={() => {}}
        onHide={() => {}}
      >
        <div
          class='queryplanContent_m'
          style='width:100vw;  height:100vh !important;  background: #f0f2f5 !important;'
        >
          <header>
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
              onClick={() => {
                showPopup.value = false;
                menuContent.value.hide();
              }}
            ></i>
            <span>{$q.lang.queryPlan.mobile.planManager}</span>
          </header>
          <div
            class='planManager'
            style={
              'height: calc(100vh - 50px);margin-top: 8px; padding-top: 8px !important;'
            }
          >
            <div
              type='fasr-tabs-div'
              class={'planListManger'}
              style={'height:100%'}
            >
              {(() => {
                return (
                  <div
                    title={$q.lang.queryPlan.mobile.planManager}
                    {...(modifyPlan.value &&
                    modifyPlan.value.ID != currectPlan.value.ID
                      ? { disabled: true }
                      : {})}
                    style={'padding:0 16px 8px 16px;height:100%'}
                    onClick={e => {
                      e.stopPropagation();
                      e.preventDefault();
                      return false;
                    }}
                  >
                    <div class='search'>
                      <t-search
                        class='tr-input-search'
                        borderless
                        outlined={false}
                        style='width:100%;'
                        placeholder={$q.lang.queryPlan.title.searchPlaceholder}
                        v-model={searchFilter.value}
                        dense='dense'
                        clearable
                        labelPosition='left'
                      >
                        {{
                          prepend: () => {
                            return (
                              <t-icon
                                name='search'
                                class='text-gray-8'
                                style='margin-left: 10px'
                              ></t-icon>
                            );
                          },
                        }}
                      </t-search>
                      <t-popover
                        ref={sortRef}
                        v-model:show={showPopover.value}
                        // actions.value={actions.value}
                        // onSelect={onSelect}
                        style='z-index:1000000;min-width:0'
                        teleport={(() => {
                          return document.body;
                        })()}
                      >
                        {{
                          default: () => {
                            let TM = [];
                            for (let i = 0; i < actions.value.length; i++) {
                              TM.push(
                                <p
                                  key={i}
                                  onClick={() => {
                                    onSelect(actions.value[i]);
                                    showPopover.value = false;
                                    sortRef.value.hide();
                                  }}
                                  style='width:90px;padding:8px 10px;margin:0'
                                >
                                  <span
                                    style={
                                      sortCode.value == actions.value[i].value
                                        ? 'color:#1A8CEA'
                                        : ''
                                    }
                                  >
                                    {actions.value[i].text}
                                  </span>
                                </p>,
                              );
                            }
                            return TM;
                          },
                          reference: () => {
                            return (
                              <i
                                class={'fas dx-icon icon-t-sort-ascending'}
                              ></i>
                            );
                          },
                        }}
                      </t-popover>
                    </div>
                    <div
                      class='planList'
                      style={'    height: calc(100% - 88px);'}
                    >
                      <t-list height='300px' class='queryPlan_portal_manage_list'>
                        {(() => {
                          let Template = [];
                          for (
                            let i = 0;
                            i < queryPlanByFilter.value.length;
                            i++
                          ) {
                            Template.push(
                              <div
                                center
                                onClick={e => {
                                  e.stopPropagation();
                                  e.preventDefault();
                                  return false;
                                }}
                              >
                                <queryPlanComponent
                                  planSort={sortCode.value}
                                  planList={queryPlanList.value}
                                  showSubWarning={false}
                                  planType={'1'}
                                  showSub={false}
                                  pageID={pageID.value}
                                  onOperate={planOperate}
                                  plan={queryPlanByFilter.value[i]}
                                  v-model:modifyPlan={modifyPlan.value}
                                  onPlanChange={async(plan) => {
                                    plan = await GetQueryPlanV2(plan.ID)
                                    plan.isReady = true
                                    modifyPlan.value = Object.assign({}, plan);
                                    currectPlan.value = Object.assign({}, plan);
                                    menuContent.value.hide();
                                  }}
                                ></queryPlanComponent>
                              </div>,
                            );
                          }
                          if (queryPlanByFilter.value.length == 0) {
                            Template.push(<t-empty></t-empty>);
                          }
                          return Template;
                        })()}
                      </t-list>
                    </div>
                    <div
                      class='bottom'
                      style={'    position: relative;    bottom: -8px;'}
                    >
                      <t-button
                        class='submit'
                        onClick={() => {
                          showPopup.value = false;
                          menuContent.value.hide();
                        }}
                        type='primary'
                        style='border:1px solid #DCDCDC;color:rgba(0,0,0,.9);height:32px'
                        size='normal'
                        style='width:50%;height:40px'
                      >
                        {$q.lang.label.cancel}
                      </t-button>
                      <t-button
                        class='submit'
                        color='primary'
                        onClick={() => {
                          menuContent.value.hide();
                        }}
                        type='primary'
                        size='normal'
                        style='width:50%;height:40px'
                      >
                        {$q.lang.label.ok}
                      </t-button>
                    </div>
                  </div>
                );
              })()}
            </div>
          </div>
        </div>
      </tm-dialog>
    );
  };
  const generatePlanOperateComponent = () => {
    return (($q.screen.xs || $q.platform.is.mobile)&&mappingProps.planType=='1')
      ? generateMobileQuerplanOperate()
      : generatePcQuerplanOperate();
  };
  return {
    generatePlanOperateComponent,
  };
};
